<!--这是需要轮播图的主页，不包含顶部条-->
<template>

  <div class="common-layout">

    <!--    轮播图-->
    <el-container class="mainView" style="background-color: white;margin-top: 20px">
      <el-main class="homeMain">
        <el-carousel
            class="carousel"
            direction="horizontal"
            :autoplay="true"
            arrow="hover"
            height=100%
            type="card"
        >

          <el-carousel-item style="background-color: #F2F6FC">
            <el-container>
              <el-main class="item1">
                <h5 class="item1-title" style="font-size: 36px;color: white;margin-left: -85px;font-weight: 600">| HNUNFT交易平台</h5>
                <p class="item1-tips" style="font-size: 18px;color: white;margin-left: -85px;font-weight: 600">
                  基于NFT的数字作品交易平台是一个基于<br>
                  internet的网站,用户可以在该平台上对自<br>
                  己的数字作品上链进行存证并将自己作品拆分进<br>
                  行出售,可在平台上充值并 完成数字作品的交<br>
                  易,可与不同的用户进行沟通交流，可以查看最<br>
                  近NFT与区块链的相关新闻案例，本数字平台<br>
                  方便大家的数字作品版权保护与交易,提升用户体验
                </p>
                <p class="slogan" @click="go2login" v-if="false">马上体验</p>
              </el-main>
<!--              <el-main>-->
<!--                <el-card class="item1"/>-->
<!--              </el-main>-->
            </el-container>
          </el-carousel-item>

          <el-carousel-item class="item2">
            <div>
              <h3 class="item2-title" style="font-size: 30px">| 什么是数字藏品</h3>
              <p class="item2-tips" style="font-size: 18px;margin-top: 5%">
                开启全新的数字艺术收藏之旅<br>
                每个数字藏品都是独一无二的，且具有不同属性<br>
                这些属性通常存储在元数据中，且铸造后不可篡改<br>
                数字藏品铸造数量可通过公共区块链网络验证，具有可证明性
              </p>
            </div>
          </el-carousel-item>

          <el-carousel-item class="item3">
            <div>
              <h3 class="item3-title" style="font-size: 30px;">Conflux区块链底层系统 |</h3>
              <p class="item3-tips" style="font-size: 14px">
                Conflux是一个国内初创的区块链研发项目<br>
                Conflux 研发的区块链底层系统已经突破交易吞吐量和交易确认时间两项最大的区块链技术瓶颈<br>
                是现有知名海外项目比特币系统数据处理能力的数千倍，以太坊系统数据处理能力的数百倍<br>
                本平台依托Conflux区块链底层系统<br>
                对交易进行实时记录，实现数字版权全生命周期管理<br>
              </p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-main>
      <!--      <div class="news">
              <div class="jianju">

                <img :src="src" class="titleSize"/>
                <h3 class="title">新闻</h3>
              </div>
              <div>
                <el-container>
                  <el-aside width="50px"></el-aside>
                  <el-aside width="450px">
                    <a :href=this.newsUrl0 target="_blank"> <img class="img" :src="this.newspictureUrl" alt/></a>

                    <div>
                      <br>
                      <h2>{{ this.newsTitle0 }}</h2>
                      <el-link
                          :href=this.newsUrl0
                          target="_blank">
                        {{ this.newsContent0 }}
                      </el-link>
                    </div>
                  </el-aside>

                  <el-aside width="240px">
                    <h4>{{ this.newsTitle1 }}</h4>
                    <el-link
                        :href=this.newsUrl1
                        target="_blank">
                      {{ this.newsContent1 }}
                    </el-link>
                    <br>
                    <h4>{{ this.newsTitle2 }}</h4>
                    <el-link
                        :href=this.newsUrl2
                        target="_blank">
                      {{ this.newsContent2 }}
                    </el-link>
                    <br>
                    <h4>{{ this.newsTitle3 }}</h4>
                    <el-link
                        :href=this.newsUrl3
                        target="_blank">
                      {{ this.newsContent3 }}
                    </el-link>
                    <br>
                    <h4>{{ this.newsTitle4 }}</h4>
                    <el-link
                        :href=this.newsUrl4
                        target="_blank">
                      {{ this.newsContent4 }}
                    </el-link>
                  </el-aside>

                </el-container>

              </div>

            </div>-->
      <!--      <div class="cases">
              <div>
                <img :src="src1" class="titleSize"/>
                <h3 class="title">案例</h3>
              </div>
              <div>
                <el-container>
                  <el-aside>

                    <h4>{{ this.caseTitle1 }}</h4>
                    <el-link
                        :href=this.caseUrl1
                        target="_blank">
                      {{ this.caseContent1 }}
                    </el-link>
                    <br>
                    <h4>{{ this.caseTitle2 }}</h4>
                    <el-link
                        :href=this.caseUrl2
                        target="_blank">
                      {{ this.caseContent2 }}
                    </el-link>
                    <br>
                    <h4>{{ this.caseTitle3 }}</h4>
                    <el-link
                        :href=this.caseUrl3
                        target="_blank">
                      {{ this.caseContent3 }}
                    </el-link>
                    <br>
                    <h4>{{ this.caseTitle4 }}</h4>
                    <el-link
                        :href=this.caseUrl4
                        target="_blank">
                      {{ this.caseContent4 }}
                    </el-link>

                  </el-aside>
                  <el-aside width="450px">
                    <a :href=this.caseUrl0 target="_blank"><img class="img" :src="this.casepictureUrl" alt/></a>
                    <div>
                      <br>
                      <h2>{{ this.caseTitle0 }}</h2>
                      <el-link
                          :href=this.caseUrl0
                          target="_blank">
                        {{ this.caseContent0 }}
                      </el-link>
                    </div>
                  </el-aside>
                </el-container>

              </div>
            </div>-->
    </el-container>
    <el-divider />
    <br>

    <!--    推送-->
    <!--    <div class="line1"></div>-->
    <el-container style="height: fit-content;margin-top: 60px;">

      <el-header style="margin-left: 100px;">
        <h class="pushTitle">根据您的标签“ {{ this.tag1 }} {{ this.tag2 }} {{ this.tag3 }}”为您推荐</h>
        <el-button
            @click="getPushData(this.userId)"
            class="refreshBtn"
            color="#626aef"
            :dark="isDark"
            size="large"
            round
            plain
            type="primary"
            style="position: relative;top: -10%">
          <el-icon size="large">
            <Refresh/>
          </el-icon>
          换一批
        </el-button>
      </el-header>

      <el-main>
        <el-col
            v-for="(item) in pushData"
            :key="item.id"
            :offset="0"
            :span="24"
        >

          <el-card
              class="goodsCard"
              shadow="hover"
              @click="handleDetail(item.id)"
              style="background-color: white;border: none">

            <div style="display: flex;flex-direction: row;justify-content: initial;margin-left: 140px;">

              <div style="border-radius: 15px;">

                <el-card id="recommend-image" shadow="none" style="background-color: white;">
                  <el-image
                      :src=item.picture
                      class="image"
                      :fit="'contain'"/>
                </el-card>
              </div>

              <!--              超大图片右侧的信息-->
              <ul>

                <div>
                  <h3 class="goodsTitle">{{ item.title }}</h3>
                </div>

                <el-row style="margin-top: 193px;margin-bottom: 15px">
                  <div class="goodsPrice"
                       style="display: flex;flex-direction: row;justify-content: space-between;">
                    <div id="coin-div" style=";width: 60px;height: 60px;margin-top: -1px;margin-right: 10px"></div>
                    {{ item.price }}&nbsp;HNUB
                  </div>
                </el-row>

                <el-row>
                  <div>
                    <el-tag effect="dark" color="#6F3DF8" style="border: #703CF6" size="large"
                            v-if="item.type=='文字作品'">{{ item.type }}
                    </el-tag>
                    <el-tag effect="dark" color="#6F3DF8" style="border: #703CF6" size="large"
                            v-if="item.type=='摄影作品'">{{ item.type }}
                    </el-tag>
                    <el-tag effect="dark" color="#6F3DF8" style="border: #703CF6" size="large"
                            v-if="item.type=='美术作品'">{{ item.type }}
                    </el-tag>
                    <el-tag effect="dark" color="#6F3DF8" style="border: #703CF6" size="large"
                            v-if="item.type=='音乐作品'">{{ item.type }}
                    </el-tag>
                    <el-tag effect="dark" color="#6F3DF8" style="border: #703CF6" size="large"
                            v-if="item.type=='影视作品'">{{ item.type }}
                    </el-tag>
                  </div>
                </el-row>

                <el-row style="margin-top: 24px">
                  <el-tag effect="plain" type="danger" v-if="item.status=='所有权'" size="small" class="firStatus">
                    {{ item.status }}
                  </el-tag>
                  <el-tag effect="plain" type="primary" v-if="item.status=='使用权'" size="small" class="firStatus">
                    {{ item.status }}
                  </el-tag>

                </el-row>

                <el-row align="middle" style="margin-top: 28px">
                  <el-col :span="24" style="text-align: center">
                    <el-button
                        text
                        type="primary"
                        class="detailBtn"
                        style="width: 310px;height: 64px;background-color: #703CF6"
                    ><span style="font-size: 24px;color: white">查看详情</span>
                    </el-button>
                  </el-col>
                </el-row>

              </ul>

            </div>

          </el-card>

        </el-col>
        <!--        </el-row>-->
      </el-main>
    </el-container>
    <!--    推送end-->

    <!--    <div class="line1" style="margin-top: auto"></div>-->
    <br>

    <!--    网格-->
    <el-container>

      <h class="pushTitle" style="margin-left: 100px;">全部商品</h>

      <!--      搜索框-->
      <el-header
          style="display: flex;flex-direction: row;justify-content: center;background-color: white;border-radius: 20px;margin-top: 50px">
        <div class="leftSpace" style="width: 80%">

          <el-form :inline="true">
            <el-row>
              <el-col :span="6">
                <el-form-item>
                  <el-select v-model="goodstype" placeholder="商品分类" @change="changeGoodsType" clearable="true"
                             class="select-button"
                             @clear=this.getdata>
                    <el-option label="文字作品" value="文字作品"/>
                    <el-option label="摄影作品" value="摄影作品"/>
                    <el-option label="美术作品" value="美术作品"/>
                    <el-option label="音乐作品" value="音乐作品"/>
                    <el-option label="影视作品" value="影视作品"/>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item>
                  <el-select v-model="buytype" placeholder="购买类别" @change="changeBuyType" clearable="true"
                             @clear=this.getdata>
                    <el-option label="所有权" value="所有权"/>
                    <el-option label="使用权" value="使用权"/>
                  </el-select>
                </el-form-item>
              </el-col>

              <!--              <el-col :span="6">
                              &lt;!&ndash;                <el-form-item>&ndash;&gt;
                              &lt;!&ndash;                  <el-select v-model="sorttype" placeholder="排序方式" @change="changeSortType" clearable="true">&ndash;&gt;
                              &lt;!&ndash;                    <el-option label="升序" value="升序" />&ndash;&gt;
                              &lt;!&ndash;                    <el-option label="降序" value="降序" />&ndash;&gt;
                              &lt;!&ndash;                  </el-select>&ndash;&gt;
                              &lt;!&ndash;                </el-form-item>&ndash;&gt;
                            </el-col>-->

              <el-col :span="6" :offset="0">
                <el-form-item>
                  <el-input
                      width="200%"
                      v-model="workname"
                      placeholder="搜索作品名称"
                      @click="search" clearable="true"
                      @clear="getdata"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item>
                  <el-button @click="search" color="#626aef"
                             :dark="isDark"
                             plain>搜索</el-button>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>

        </div>
      </el-header>

      <!--      网格区域-->
      <el-main class="mainView" style="display: flex;overflow:initial;background-color: white">
        <div>
          <el-row :gutter="0" style="padding-left: 120px;padding-right: 100px">
            <el-col
                v-for="(item) in tableData"
                :key="item.id"
                :offset="0"
                :span="8"
            >
              <el-card
                  class="goodsCard-grid"
                  shadow="hover"
                  @click="handleDetail(item.id)">

                <el-image
                    :src=item.picture
                    class="image-grid"
                    :fit="'contain'"
                />

                <!--                <el-divider></el-divider>-->

                <div>
                  <ul style="list-style-type: none;padding-left:0;background-color: white">

                    <div>
                      <h3 class="goodsTitle-grid">{{ item.title }}</h3>
                    </div>

                    <el-row gutter="20" align="middle">

                      <el-col :span="14">
                        <div>
                          <el-tag type="primary" v-if="item.type=='文字作品'">{{ item.type }}</el-tag>
                          <el-tag type="success" v-if="item.type=='摄影作品'">{{ item.type }}</el-tag>
                          <el-tag type="danger" v-if="item.type=='美术作品'">{{ item.type }}</el-tag>
                          <el-tag type="info" v-if="item.type=='音乐作品'">{{ item.type }}</el-tag>
                          <el-tag type="warning" v-if="item.type=='影视作品'">{{ item.type }}</el-tag>
                        </div>
                      </el-col>

                      <el-col :span="10">
                        <div class="goodsPrice-grid"
                             style="display: flex;flex-direction: row;justify-content: flex-end">
                          <div id="coin-div-black"
                               style=";width: 30px;height: 30px;margin-top: -3px;margin-right: 5px"></div>
                          {{ item.price }}&nbsp;HNUB
                        </div>
                      </el-col>

                    </el-row>

                    <el-row style="margin-top: 10px">
                      <el-col :span="14">
                        <el-tag effect="plain" type="danger" v-if="item.status=='所有权'" size="small"
                                class="firStatus">{{ item.status }}
                        </el-tag>
                        <el-tag effect="plain" type="primary" v-if="item.status=='使用权'" size="small"
                                class="firStatus">{{ item.status }}
                        </el-tag>
                      </el-col>

                      <el-col :span="10" style="display: flex;flex-direction: row;justify-content: flex-end">
                        <el-button
                            text
                            type="primary"
                            class="detailBtn"
                            style="width: 96px;height: 28px;background-color: #703CF6;box-shadow: none"
                        ><span style="font-size: 12px;color: white">查看详情</span>
                        </el-button>
                      </el-col>

                    </el-row>

                  </ul>
                </div>

              </el-card>

            </el-col>
          </el-row>
        </div>
      </el-main>

    </el-container>
  </div>


</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import {Coin, Refresh} from '@element-plus/icons-vue'
import axios from "axios";

export default {
  name: "trade-center",
  computed: {
    userId() {
      return JSON.parse(sessionStorage.getItem('userObj')).id;
    },
    tag1() {
      return JSON.parse(sessionStorage.getItem('userObj')).tag1
    },
    tag2() {
      return JSON.parse(sessionStorage.getItem('userObj')).tag2
    },
    tag3() {
      return JSON.parse(sessionStorage.getItem('userObj')).tag3
    },
  },
  created() {
    console.log('成功加载数据')
    // TODO 添加一个公用的游客账户 id是11 在所有设计到写的地方加上检查，如果id是11，则报错未登录
    // if (sessionStorage.getItem("userObj") == null) {
    //   sessionStorage.setItem("userObj", JSON.stringify(this.default_user.data.userInfo))
    //   sessionStorage.setItem("token", JSON.stringify(this.default_user.data.token))
    // }

    this.getdata()
    this.getNews()
    this.getCase()
    this.getPushData(this.userId)
  },

  components: {
    // eslint-disable-next-line vue/no-unused-components
    Coin,
    Refresh
  },

  data() {
    return {

      //新闻案例展示
      src: require('@/assets/mainView.png'),
      src1: require('@/assets/mainView2.png'),
      newspictureUrl: '',
      newsContent0: '',
      newsContent1: '',
      newsContent2: '',
      newsContent3: '',
      newsContent4: '',
      newsTitle0: '',
      newsTitle1: '',
      newsTitle2: '',
      newsTitle3: '',
      newsTitle4: '',
      newsUrl0: '',
      newsUrl1: '',
      newsUrl2: '',
      newsUrl3: '',
      newsUrl4: '',

      casepictureUrl: '',
      caseContent0: '',
      caseContent1: '',
      caseContent2: '',
      caseContent3: '',
      caseContent4: '',
      caseTitle0: '',
      caseTitle1: '',
      caseTitle2: '',
      caseTitle3: '',
      caseTitle4: '',
      caseUrl0: '',
      caseUrl1: '',
      caseUrl2: '',
      caseUrl3: '',
      caseUrl4: '',

      newsData: [],
      caseData: [],

      goodstype: '',
      buytype: '',
      sorttype: '',

      workname: '',

// 商城数据
      tableData: [],

      //推送数据
      pushData: [],

      //默认用户
      default_user: {
        code: 200,
        message: null,
        data: {
          userInfo: {
            id: 11,
            username: 'wbw',
            phone: "13081860369",
            email: "2814866235@qq.com",
            citizenId: "430512198908131367",
            pocket: "net1024:aaj1hxrgczugmycf1apwkznsc2cvpzgwky8hcp8tx8",
            avatar: 'default.jpg',
            isAdmin: null,
            isCertified: 1,
            realName: "武博文",
            tag1: "摄影",
            tag2: null,
            tag3: null,
            front: "正.jpg",
            negative: "反.jpg"
          },
          token: "eyJ0eXBlIjoiSldUIiwiYWxnIjoiSFM1MTIifQ.eyJzdWIiOiJ3YnciLCJpYXQiOjE2ODA2Njk4NzMsImV4cCI6MTY4MTI3NDY3M30.GkNP2KaMcwOA98_62AHW6oLmNXPimDVZJaoHuR9AtjMILDAD5-W_HW1cdmlX0o-0R1Dkx8ExKh-vi1sF1Jmb5Q"
        }
      },

    }
  },
  methods: {

    //改变商品类型
    changeGoodsType() {
      console.log('改变商品类型成功')
      axios.get('http://120.48.51.66:8081/sale/getSaleByGoodsType'
          , {
            params: {
              goodsType: this.goodstype,
              id: this.userId
            }
          }).then((response) => {
        if (response.data.code == 200) {
          console.log(response.data)
          this.tableData = response.data.data.saleList

        }
        // eslint-disable-next-line no-unused-vars
      })
    },
    // 选择购买类型
    changeBuyType() {
      console.log('选择购买类型成功')
      axios.get('http://120.48.51.66:8081/sale/getSaleBySaleType'
          , {
            params: {
              saleType: this.buytype,
              id: this.userId
            }
          }).then((response) => {
        if (response.data.code == 200) {
          console.log(response.data)
          this.tableData = response.data.data.saleList

        }
        // eslint-disable-next-line no-unused-vars
      })
    },

    getPushData(userId) {
      axios.get('http://120.48.51.66:8081/sale/post'
          , {
            params: {
              userId: userId,
            }
          }).then((response) => {
        if (response.data.code == 200) {
          console.log(response.data)
          this.pushData = response.data.data.saleList

        }
        // eslint-disable-next-line no-unused-vars
      }).catch(e => {
            this.$message({
              message: "网络异常！",
              type: "error"
            });
          }
      )
    },
    //搜索


    search() {
      axios.get('http://120.48.51.66:8081/sale/search'
          , {
            params: {
              sortPara: this.workname,
              id: this.userId
            }
          }).then((response) => {
        if (response.data.code == 200) {
          console.log(response.data)
          this.tableData = response.data.data.saleList

        }
        // eslint-disable-next-line no-unused-vars
      })
    },

//查看商品详情
    handleDetail(id) {

      if (JSON.parse(sessionStorage.getItem('userObj')).isCertified == 1) {
        console.log(id),
            this.$router.push({name: 'goodsDetail', params: {id: id}})
        console.log('成功进入商品详情页面')
      } else {
        this.$message({
          message: "请先实名认证",
          type: "error"
        });
      }
    },

//获取数据
    getdata() {
      axios.get('http://120.48.51.66:8081/sale/saleForMall'
          , {
            params: {
              id: this.userId
            }
          }).then((response) => {
        if (response.data.code == 200) {
          console.log(response.data)
          this.tableData = response.data.data.saleList

        }
        // eslint-disable-next-line no-unused-vars
      })
    },

    getNews() {
      axios.get('http://120.48.51.66:8081/news/showNews'
          , {
            params: {}
          }).then((response) => {
        if (response.data.code == 200) {

          // this.newsData=(response.data.data.newsList)
          this.newspictureUrl = response.data.data.newsList[0].pictureUrl
          this.newsContent0 = response.data.data.newsList[0].content
          this.newsTitle0 = response.data.data.newsList[0].title
          this.newsUrl0 = response.data.data.newsList[0].url
          this.newsContent1 = response.data.data.newsList[1].content
          this.newsTitle1 = response.data.data.newsList[1].title
          this.newsUrl1 = response.data.data.newsList[1].url
          this.newsContent2 = response.data.data.newsList[2].content
          this.newsTitle2 = response.data.data.newsList[2].title
          this.newsUrl2 = response.data.data.newsList[2].url
          this.newsContent3 = response.data.data.newsList[3].content
          this.newsTitle3 = response.data.data.newsList[3].title
          this.newsUrl3 = response.data.data.newsList[3].url
          this.newsContent4 = response.data.data.newsList[4].content
          this.newsTitle4 = response.data.data.newsList[4].title
          this.newsUrl4 = response.data.data.newsList[4].url

        }
      })
    },
    getCase() {
      axios.get('http://120.48.51.66:8081/case/showCase'
          , {
            params: {}
          }).then((response) => {
        if (response.data.code == 200) {

          console.log('案例数据')
          // this.caseData=response.data.data.caseList
          this.casepictureUrl = response.data.data.caseList[0].pictureUrl
          this.caseContent0 = response.data.data.caseList[0].content
          this.caseTitle0 = response.data.data.caseList[0].title
          this.caseUrl0 = response.data.data.caseList[0].url
          this.caseContent1 = response.data.data.caseList[1].content
          this.caseTitle1 = response.data.data.caseList[1].title
          this.caseUrl1 = response.data.data.caseList[1].url
          this.caseContent2 = response.data.data.caseList[2].content
          this.caseTitle2 = response.data.data.caseList[2].title
          this.caseUrl2 = response.data.data.caseList[2].url
          this.caseContent3 = response.data.data.caseList[3].content
          this.caseTitle3 = response.data.data.caseList[3].title
          this.caseUrl3 = response.data.data.caseList[3].url
          this.caseContent4 = response.data.data.caseList[4].content
          this.caseTitle4 = response.data.data.caseList[4].title
          this.caseUrl4 = response.data.data.caseList[4].url

        }
      })
    }
  },

}
</script>

<style scoped>

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 0px;
  width: 488px;
  height: 580px;
  border: none;
  object-fit: cover;
}

.align-center {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  left: 8px;
}

.role-left {
  color: rgb(148, 137, 137);
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}

.box-card {
  width: 480px;
  height: 270px;
}

.rowstyle {
  margin-left: 100px;
  margin-top: 0px;
}

.line {
  width: 0.1em;
  height: 550px;
  background: #f3f3f3;
}

.common-layout {
  /*margin-left: 100px;*/
}

.news {
  width: 50%;
}

.cases {
  width: 50%;
}

.img {
  width: 400px;
}

.mainView {
  background: #ffffff;
  height: 400px;
}

.title {
  position: relative;
  margin-left: 50px;
  margin-top: -40px;
}

.titleSize {
  height: 40px;
  width: 40px;
}

.line1 {
  float: right;
  width: 100%;
  height: 0.5px;
  margin-top: -0.5em;
  background: #d4c4c4;
  position: relative;
  text-align: center;
}

.jianju {
  margin-left: 50px;
}

.box {
  margin-bottom: 30px;
}

.leftSpace {
}

.goodsCard {
  margin-top: 20px;
}

#recommend-image {
  /*卡片拾起效果*/
  transform-style: preserve-3d;
  perspective: 900px;
  transform: rotateY(0);
  transition-delay: .1s;
  border-radius: 5px;
  border: white 5px solid;
}

/*卡片拾起效果*/
#recommend-image:hover {
  transform: rotateY(0deg) scale(1.15);
  box-shadow: 0 25px 40px rgba(0, 0, 0, 0);
}

.goodsCard-grid {
  margin-top: 20px;
  width: 360px;
  height: 532px;
  /*卡片拾起效果*/
  transform-style: preserve-3d;
  perspective: 900px;
  transform: rotateY(0);
  transition-delay: .1s;
  border-radius: 5px;
  border: white 5px solid;
}

/*卡片拾起效果*/
.goodsCard-grid:hover {
  transform: translateY(-10px);
  /*transform: rotateY(0deg) scale(1.1);*/
  box-shadow: 0 15px 25px rgba(0, 0, 0, .7);
}

.goodsTitle {
  /*left: -10%;*/
  position: relative;
  font-weight: 600;
  font-size: 40px;
  color: black;
  word-break: break-all;
  text-overflow: ellipsis;
}

.goodsTitle-grid {
  position: relative;
  font-weight: 700;
  font-size: 24px;
  color: black;
  word-break: break-all;
  text-overflow: ellipsis;
}

.goodsPrice {
  position: relative;
  font-weight: 600;
  font-size: 40px;
  color: black;
  word-break: break-all;
  text-overflow: ellipsis;
}

.goodsPrice-grid {
  position: relative;
  font-weight: 600;
  font-size: 16px;
  color: black;
  word-break: break-all;
  text-overflow: ellipsis;
}

.detailBtn {
  align-self: center;
  position: relative;
  letter-spacing: 3px;
  font-weight: 600;
}

.detailBtn:hover {
  box-shadow: 0px 0px 10px 0px #703CF6;
}

.firStatus {
  position: relative;
}

.pushTitle {
  color: black;
  letter-spacing: 2px;
  font-weight: 1000;
  font-size: 60px
}

.refreshBtn {
  margin-left: 20px;
}

/*TODO 轮播图style*/

.homeMain {
  padding: 0 0 0 0;
  margin-left: 0%;
  margin-right: 0%;
}

.carousel {
  padding-bottom: 0;
  margin-bottom: 0;
  height: 100%;
  overflow-y: hidden;
}

el-carousel__container {
  height: 100%;
}

.item1 {
  height: 58%;
  width: 100%;
  /*margin: 0px;*/
  /*padding: 0px;*/
  background: url(@/assets/logo-solid.png) center repeat;
  background-size: cover;
  background-position-x: 200px;
  background-position-y: -179px;
  opacity: 1.5;
}

.item2 {
  background: url("@/assets/news2.jpg") center;
  background-size: cover;
}

.page {
  width: 50%;
  position: relative;
}

.slogan {
  font-weight: bolder;
  text-align: center;
  font-size: 50px;
  color: #000000;
  padding: 30px 0;
  position: relative;
  top: 300px;
  left: -20%;
}

.slogan:after {
  position: absolute;
  transition: 0.3s;
  content: "";
  width: 0;
  left: 50%;
  bottom: 22%;
  height: 5px;
  background: black;
}

.slogan:hover {
  cursor: pointer;
}

.slogan:hover:after {
  width: 30%;
  left: 35%;
}

.item2-title {
  left: 3%;
  top: 5%;
  font-weight: 600;
  font-size: 50px;
  color: white;
  position: absolute;
}

.item2-tips {
  left: 4%;
  top: 25%;
  color: white;
  font-weight: 500;
  font-size: 19px;
  position: absolute;
}

.item1-title {
  left: 15%;
  top: 0%;
  font-weight: 600;
  font-size: 40px;
  color: black;
  position: absolute;
}

.item1-tips {
  left: 15%;
  top: 25%;
  color: black;
  font-weight: 200;
  font-size: 19px;
  position: absolute;
}

.item3 {
  text-align: right;
  background: url("@/assets/homeBackground3.jpg") center;
  background-size: contain;
}

.item3-title {
  left: 50%;
  top: -3%;
  font-weight: 600;
  font-size: 50px;
  color: white;
  position: absolute;
}

.item3-tips {
  left: 40%;
  top: 17%;
  right: 4%;
  color: white;
  font-weight: 500;
  font-size: 19px;
  position: absolute;
}

/*TODO 轮播图style end*/

#coin-div {
  background-image: url("@/assets/298-coins-black.svg");
}

#coin-div-black {
  background-image: url("@/assets/298-coins-black.svg");
}

.select-button {
  width: 200px;
  height: 280px;
}

</style>
